<template>
  <div class="page has-navbar" v-nav="{ title: '配送信息', showBackButton: true, onBackButtonClick: back,showMenuButton: true, }">
    <div class="page-content">
      <div id="wallpaper">
        <div class="address">
          <p class="addressMsg">四川大学锦城学院8号宿舍201室 <i class="icon ion-chevron-right"></i>
          </p>
          <p class="phoneMsg">周(先生) 138 0013 8000</p>
        </div>
        <div class="flowerMsg">
          <FlowerListItem/>
        </div>
        <div class="list list-ios" >
          <div class="item item-ios price">
            <div>
              <span class="left">配送费</span><span class="right">￥0.00</span>
            </div>
            <p>三环以内免费配送，三环外需加配送费</p>
          </div>
          <div class="item item-ios">
            满减优惠
            <span class="item-note">
              <span style="color: #ff3300">满198减10</span>
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
          <div class="item item-ios">
            使用积分
            <span class="item-note">
              可用积分 963
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </div>
        <div class="list list-ios" >
          <div class="item item-ios">
            配送日期
            <span class="item-note">
              <span style="color: #000000">2017-12-12</span>
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
          <div class="item item-ios">
            配送时间
            <span class="item-note">
              请选择配送时间
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
          <div class="item item-ios">
            下单人联系方式
            <span class="item-note">
              <span style="color: #000000">139 0235 6678</span>
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </div>
        <div class="list list-ios" >
          <div class="item item-ios switch">
            需要祝福卡片
            <span class="item-note">
              <von-toggle :text="toggleText" :value.sync="pushNotification"></von-toggle>
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
          <div class="item item-ios">
            祝福话语
            <span class="item-note">
              请输入您想对收货人说的话
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
          <div class="item item-ios">
            留言备注
            <span class="item-note">
              请输入您想对我们说的话
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </div>
        <div class="pay">
          <Pay/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FlowerListItem from '../components/FlowerListItem'
  import Pay from './Pay'
  export default {
      name: "PsMsg",
      data(){
        return{
          toggleText: " ",
          pushNotification: true
        }
      },
      components : {
        FlowerListItem,
        Pay,
      },
      methods : {
        back() {
          $router.back('/')
        },
      }
  }
</script>

<style scoped lang="less">
  .switch {
    position: relative;
    .von-toggle {
      position: absolute;
      width: 100px;
      display: inline;
      top: 0;
      right: 0px;
    }
  }
.address{
  text-align: center;
  height: 120px;
  background: url("../image/gld.png") no-repeat;
  background-position: bottom;
  background-size: 100% 30px;
  i{
    font-size: 16px;
    color: #999999;
  }
  .addressMsg{
    font-size: 18px;
    padding-top: 20px;
  }
}
.list-ios{
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
  .item{
    padding-left: 15px;
    padding-right: 15px;
    .item-note{
      .ion-chevron-right {
        margin-left: 10px;
      }
    }
  }
}
.pay{
  padding-top: 15px;
}
//配送费
.price{
  line-height: 30px;
  >div{
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    .right{
      color: #ff3300;
    }
  }
  >p{
    color: #ff3300;
  }
}
</style>
